<template>
  <view>
    <!-- 收货地址 -->
    <view class="shbox">
      <view class="shbox2">
        <view>暂无收货地址,去添加</view>
        <image
          src="/static/imgs/jt2.png"
          style="height: 40rpx; width: 40rpx"
        ></image>
      </view>
    </view>
    <!-- //产品信息 -->
    <view style="margin: 30rpx; background-color: white; border-radius: 10rpx">
      <view style="margin: 30rpx; display: flex; flex-direction: column">
        <view style="margin: 20rpx 0rpx 20rpx 0rpx">产品信息</view>
        <!-- 产品信息 -->
        <view style="display: flex; justify-content: space-between">
          <view>
            <image
              src="https://wx1.sinaimg.cn/mw690/e8a22d7bgy1hovb7jydr5j20u018zgsd.jpg"
              model="aspectFill"
              style="height: 150rpx; width: 150rpx; border-radius: 25rpx"
            ></image>
          </view>
          <view style="margin: 0rpx 30rpx 0rpx 30rpx; font-size: 25rpx"
            >女士羽绒服2025新款冬季韩版时尚百搭中长款羽绒服女装外套</view
          >
          <view style="color: red">
            <!-- //规格 -->
            <view>¥222.00</view>
            <view style="font-size: 25rpx; margin-top: 20rpx; color: gray"
              >500g</view
            >
          </view>
        </view>
        <!-- //购买数量 -->
        <view
          style="
            margin: 20rpx 0rpx 20rpx 0rpx;
            display: flex;
            justify-content: space-between;
          "
        >
          <view>购买数量</view>
          <view>
            <view style="display: flex">
              <view class="jia">-</view>
              <view class="sum">1</view>
              <view class="jia">+</view>
            </view>
          </view>
        </view>

        <!-- 运费 -->
        <view class="boxtype">
          <view>运费</view>
          <view>¥0.00</view>
        </view>
        <!-- 合计 -->
        <view class="boxtype">
          <view style="color: gray">共1件</view>
          <view style="color: red">总结：¥222.00</view>
        </view>
      </view>
    </view>

    <view style="margin: 30rpx; background-color: white; border-radius: 10rpx">
      <view
        style="display: flex; padding: 30rpx; justify-content: space-between"
      >
        <view style="flex: 4">优惠券</view>
        <view style="color: gray">暂无可用</view>
        <image
          src="/static/imgs/jt2.png"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </view>
    </view>
    <!-- 确认订单 -->
    <view style="margin: 30rpx">
      <view class="btn"> 确认订单 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less">
.btn {
  background-color: brown;
  color: white;
  margin-top: 200rpx;
  height: 80rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxtype {
  display: flex;
  margin: 30rpx 0rpx 30rpx 0rpx;
  justify-content: space-between;
}
.sum {
  width: 50rpx;
  height: 50rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
}
.jia {
  display: flex;
  margin-left: 20rpx;
  margin-right: 20rpx;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  width: 60rpx;
  height: 50rpx;
}
.shbox2 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 40rpx;
}
.shbox {
  border-radius: 10rpx;
  margin: 30rpx;
  background-color: white;
  height: 150rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
page {
  font-size: 30rpx;
  background-color: #f1f1f1;
}
</style>
